<template>
  <view class="content">
    <view class="g-header">
    </view>
    <view class="innerPre">
    </view>
    <view class="inner">

      <view class="inputList">
        <view class="inputLi" v-for="(n,i) in settingList" :key="i">
          <view class="inputLabel">{{ n.label }}</view>
          <view class="inputRequire" v-show="n.required">*</view>
          <view class="inputValue" v-if="n.type === 'input'">
            <input v-model="n.value" :placeholder="n.placeholder" type="text">
          </view>
          <view class="inputValue" v-if="n.type === 'select'">
            <picker mode="selector" range-key="label" :value="n.rangeIndex" :range="n.rangeList" @change="rangeChange(n,i,$event)">
              <view class="pickerInner">
                <view class="pickerInnerText" v-if="n.rangeIndex>-1">{{ n.rangeList[n.rangeIndex].label }}</view>
                <view class="pickerInnerText" v-else>{{ n.placeholder }}</view>
                <view class="pickerInnerIcon"></view>
              </view>
            </picker>
          </view>
        </view>
      </view>
    </view>
    <view class="innerNext">
    </view>

    <view class="pageBtnBottomWrap">
      <view class="pageBtnBottom">
        确定
      </view>
    </view>

  </view>
</template>

<script>
import * as util from '@/common/util'
import _ from 'lodash'

export default {
  components: {},
  data(){
    return {
      title: 'Hello',
      list: [],
      settingList: [
        {
          type: 'select', label: '发票类型', placeholder: '发票类型', key: 'b', required: true, rangeIndex: -1, rangeList: [
            { label: '电子增值税发票', value: '1' },
            { label: '电子增值税发票', value: '2' },
          ],
        },
        { type: 'input', label: '公司名称', placeholder: '请填写公司名称', key: 'a', value: '', required: true },
        { type: 'input', label: '税号', placeholder: '请填写税号', key: 'a', value: '', required: true },
        { type: 'input', label: '银行账号', placeholder: '请填写银行账号', key: 'a', value: '' },
        { type: 'input', label: '开户银行', placeholder: '请填写开户银行', key: 'a', value: '' },
      ],
    }
  },
  onLoad(){
    this.id = this.$Route.query.id
    console.log(`this.id`, this.id)
  },
  onShow(){},
  mounted(){},
  onReady(){},
  methods: {
    rangeChange(n, i, e){
      n.rangeIndex = e.detail.value
    },
  },
}
</script>
<style lang="scss">
//@import "./000.scss";

page {
  background: #F7F7F7;
}

.innerPre {

}

.inner {
}

.innerNext {

}

.inputList {
  background: white;
  .inputLi {
    padding: 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #00000010;
    .inputLabel {
      font-size: 28px;
      font-weight: normal;
      line-height: 44px;
    }
    .inputRequire {
      opacity: 1;
      color: red;
      padding: 10px;
    }
    .inputValue {
      padding: 20px;
      margin-left: auto;
      text-align: right;
    }
  }
}


</style>
